<template>
  <div>
    <p>{{ n }}</p>
    <p>{{ j }}</p>

    <button @click="change()">click</button>
  </div>
</template>
<script>
import { reactive, toRefs, computed } from 'vue';
export default {
  setup() {
    let state = reactive({
      id: 10,
      n: computed(() => state.id + 10), //计算属性的方式
      j: computed(() => state.id + 100),
    });
    function change() {
      state.id += 1;
      console.log(state.id);
    }
    return {
      ...toRefs(state),
      change,
    };
  },
};
</script>
